<template>
  <div>
    <el-table :data="List" border style="width: 100%">
      <el-table-column label="logo">
        <template slot-scope="scope">
          <img :src="`http://www.jfqiandai.com/file${scope.row.logo}`" style="width:80px">
          <!-- {{scope.row.logo}} -->
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="电话号码"></el-table-column>
      <el-table-column label="二维码">
        <template slot-scope="scope">
          <img :src="`http://www.jfqiandai.com/file${scope.row.pic}`" style="width:80px">
        </template>
      </el-table-column>

      <el-table-column prop="wechat" label="微信"></el-table-column>

      <el-table-column fixed="right" label="操作" width="240">
        <template slot-scope="scope">
          <el-button @click="EditClick(scope.row)" type="primary" plain size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div>
        <div class="row">
          <span>logo:</span>
          <el-upload
            list-type="picture-card"
            action="http://www.jfqiandai.com/img/upload"
            :on-preview="handlePreview1"
            :on-remove="handleRemove1"
            :file-list="fileList1"
            :on-success="onSuccessLogo"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
        <div class="row">
          <span>电话:</span>
          <el-input v-model="phone"></el-input>
        </div>
        <div class="row">
          <span>微信:</span>
          <el-input v-model="wechat"></el-input>
        </div>
        <div class="row">
          <span>二维码:</span>
          <el-upload
            list-type="picture-card"
            action="http://www.jfqiandai.com/img/upload"
            :on-preview="handlePreview2"
            :on-remove="handleRemove2"
            :file-list="fileList2"
            :on-success="onSuccessPic"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditOk()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      logo: "",
      phone: "",
      wechat: "",
      pic: "",

      logoUrl: "",
      picUrl: "",
      List: [],
      dialogVisible: false,
      fileList1: [{}],
      fileList2: [{}]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //logo
    handleRemove1(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview1(file) {
      console.log(file);
    },
    //pic
    handleRemove2(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview2(file) {
      console.log(file);
    },
    onSuccessLogo(Response, file, fileList) {
      this.logoUrl = file.response.data.path;
    },
    onSuccessPic(Response, file, fileList) {
      this.picUrl = file.response.data.path;
    },

    //编辑
    EditClick(row) {
      this.dialogVisible = true;
      this.logoUrl = row.logo;
      this.picUrl = row.pic;
      this.phone = row.phone;
      this.wechat = row.wechat;

      if (row.logo) {
        this.fileList1[0]["url"] = "http://www.jfqiandai.com/file" + row.logo;
      } else {
        this.fileList1 = [];
      }
      if (row.pic) {
        this.fileList2[0].url = "http://www.jfqiandai.com/file" + row.pic;
      } else {
        this.fileList2 = [];
      }
    },
    //编辑OK
    EditOk() {
      // if (!/^1[34578]\d{9}$/.test(this.phone)) {
      //   alert("手机号码有误，请重填");
      //   return false;
      // }
      let url = "/config/editCustomService";
      let params = {
        logo: this.logoUrl,
        phone: this.phone,
        pic: this.picUrl,
        wechat: this.wechat
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.List = [];
          let url = "/config/getCustomService";
          this.httpGet(url, res => {
            if (res.code == 200) {
              //因为会push两次,所以重新请求
              this.List.push(res.data);
            } else {
              console.log("查询失败");
            }
          });
        }
      });
    },
    //查询信息
    getList() {
      let url = "/config/getCustomService";
      this.httpGet(url, res => {
        if (res.code == 200) {
          //会push两次
          this.List.push(res.data);
        } else {
          console.log("查询失败");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 弹框
.row {
  span {
    display: block;
    padding: 10px 0;
  }
}
.cell img {
  width: 100px;
  height: 100px;
}
</style>
